<template>
  <div>
    <div>
      名称：<input type="text" v-model="add_name">类型：<input type="text" v-model="add_type">价格：<input type="text" v-model="add_price"><br>
      <button @click="add">添加</button><br>
      <input type="text"><button>查找</button>
      <table border='1'>
        <thead>
          <tr>
            <th>id</th>
            <th>name</th>
            <th>price</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in arr" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.price }}</td>
            <td>
              <button @click="Modify_show(item.id)">修改</button>
              <button @click="del(item.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div v-show="ModifyShow">
      <ul>
        <h3>修改项id：{{ Modify_id }}</h3>
        <li>名称:<input type="text" v-model="Modify_name"></li>
        <li>类型:<input type="text" v-model="Modify_type"></li>
        <li>价格:<input type="text" v-model="Modify_price"></li>
      </ul>
      <button @click="Cancel_Modify()">取消</button>
      <button @click="Modify()">确认修改</button>
    </div>
  </div>
</template>
<script>
  // 导入组件
  import axios from 'axios'
  export default {
    // 注册组件
    components: {
     },
    // 实例属性
    name: 'APP',
    // 数据
    data () {
      return {
        arr:[],
        add_name:'',
        add_type:'',
        add_price:'',
        ModifyShow:false,
        Modify_id:'',
        Modify_name:'',
        Modify_type:'',
        Modify_price:'',
       }
     },
     // 实例方法
     methods: {
      // 渲染
      fn(){
          axios({
            url:'https://liu.zzgoodqc.cn/teas',
            method:'get'
          })
          .then(res=>{
            this.arr=res.data.data  
          })
          .catch(err=>{
            console.log(err);
          })     
      },
      //添加
      add(){
        axios({
          url:"https://liu.zzgoodqc.cn/teas",
          method:'post',
          data:{
            name: this.add_name,
            type: this.add_type,
            price:  this.add_price
          }
        })
        .then(res=>{
          this.add_name='';
          this.add_type='';
          this.add_price='';
          alert(res.data.message);
          this.fn()
        })
        .catch(err=>{
          console.log(err);
        })
      },

      //删除
      del(id){
        axios({
          url:"https://liu.zzgoodqc.cn/teas/"+id,
          method:'delete',
        })
        .then(res=>{
          alert(res.data.message)
          this.fn()
        })
        .catch(err=>{
          console.log(err);
        })
      },

      //修改显示
      Modify_show(id){
        this.ModifyShow=true
        this.Modify_id=id
      },

      //确认修改
      Modify(){
        axios({
          url:"https://liu.zzgoodqc.cn/teas/"+this.Modify_id,
          method:'PUT',
          data:{
            name:this.Modify_name,
            type:this.Modify_type,
            price:this.Modify_price
          }
        })
        .then(res=>{
          alert(res.data.message)
          this.fn()
          this.ModifyShow=false
        })
        .catch(err=>{
          console.log(err);
        })
      },

     // 取消修改
      Cancel_Modify(){
        this.ModifyShow=false
      }
     },
     // 计算属性
     computed: {
     },
     // 创建后（只能访问数据，不能操作dom）
     created () {
     },
     // 挂载后（既能访问数据，也能操作dom）
     mounted () {
          this.fn()
     },
     // 过滤器
     filters: {
     }
  }
</script>
<style lang="less" scoped>
  li{
    list-style: none;
  }
</style>
